<!-- 用户管理 -->
<template>
  <el-container>
    <el-main>
      <!-- 搜索 -->
      <el-card>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="账户">
            <el-input
              v-model="formInline.username"
              placeholder="请输入用户账户"
            />
          </el-form-item>

          <el-form-item label="邮箱">
            <el-input v-model="formInline.email" placeholder="请输入账户邮箱" />
          </el-form-item>

          <el-form-item label="角色">
            <el-select v-model="formInline.auth" placeholder="请选择角色">
              <el-option label="管理员" value="管理员" />
              <el-option label="访客" value="访客" />
            </el-select>
          </el-form-item>

          <el-form-item label="状态">
            <el-select v-model="formInline.status" placeholder="请选择状态">
              <el-option label="可用" value="1" />
              <el-option label="锁定" value="0" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="getList">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 表格 -->

      <el-card>
        <div v-if="multipleSelection.length">
          <el-button @click="changeStatusAll(1)">启用</el-button>

          <el-button @click="changeStatusAll(0)">禁用</el-button>

          <el-button @click="changeAuthAll('管理员')">授权</el-button>

          <el-button @click="changeAuthAll('访客')">解除授权</el-button>
        </div>

        <el-table
          ref="multipleTable"
          :data="list"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>

          <el-table-column prop="username" label="账户" width="300" />

          <el-table-column prop="email" label="邮箱" width="300" />

          <el-table-column prop="auth" label="角色" width="200" />

          <el-table-column prop="status" label="状态" width="200">
            <template #default="scope">
              <div class="status-box">
                <span :class="scope.row.status ? 'true' : 'false'"></span>
                <span>{{ scope.row.status ? "可用" : "已锁定" }}</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="createtime" label="注册日期" width="200" />

          <el-table-column label="操作" width="300" fixed="right">
            <template #default="scope">
              <div class="btn-box">
                <el-button
                  type="text"
                  @click="
                    changeStatus(scope.row.id, scope.row.status ? '0' : '1')
                  "
                >
                  {{ scope.row.status ? "禁用" : "启用" }}
                </el-button>

                <el-button
                  type="text"
                  @click="
                    changeAuth(
                      scope.row.id,
                      scope.row.auth === '管理员' ? '访客' : '管理员'
                    )
                  "
                >
                  {{ scope.row.auth === "管理员" ? "解除授权" : "授权" }}
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          @current-change="currentChange"
        >
        </el-pagination>
      </el-card>
    </el-main>
  </el-container>
</template>

<script setup>
import { apiUser, apiUserStatus, apiUserAuth } from "@/api/user";
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";

/**************************************************/

const list = ref([]);

const page = ref({
  current: 1,
  size: 10,
});

const total = ref(0);

const formInline = ref({});

const multipleSelection = ref([]);

/**************************************************/

// 重置
const reset = () => {
  formInline.value = {};

  getList();
};

// 切换分页
const currentChange = (pageIndex) => {
  page.value.current = pageIndex;

  getList();
};

// 多选
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};

// 启用/禁用
const changeStatus = (id, status) => {
  apiUserStatus({ id, status }).then((res) => {
    ElMessage({
      message: res.msg,
      type: "success",
    });

    getList();
  });
};

// 批量启用/禁用
const changeStatusAll = (status) => {
  apiUserStatus({ multipleSelection: multipleSelection.value, status }).then(
    (res) => {
      ElMessage({
        message: res.msg,
        type: "success",
      });

      getList();
    }
  );
};

// 授权/解除授权
const changeAuth = (id, auth) => {
  apiUserAuth({ id, auth }).then((res) => {
    ElMessage({
      message: res.msg,
      type: "success",
    });

    getList();
  });
};

// 批量授权/解除授权
const changeAuthAll = (auth) => {
  apiUserAuth({ multipleSelection: multipleSelection.value, auth }).then(
    (res) => {
      ElMessage({
        message: res.msg,
        type: "success",
      });

      getList();
    }
  );
};

/**************************************************/

const getList = () => {
  apiUser({ ...page.value, ...formInline.value }).then((res) => {
    list.value = res.data;

    total.value = res.total;
  });
};

onMounted(() => {
  getList();
});
</script>

<style scoped lang="scss"></style>
